<template>
  <div class="app-container">

    <h1 style="margin-left: 20px;">
      {{this.queryParams.questionnaireName}}
    </h1>


    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">

      <br>

      <el-form-item label="投票人数">
        {{ this.votePeopleSum }}
      </el-form-item>

      <el-form-item label="携带家口数">
        {{ this.dependentVoteSum }}
      </el-form-item>

      <el-form-item label="总投票数">
        {{ this.voteSum }}
      </el-form-item>

    </el-form>





    <el-row :gutter="10" class="mb8">


      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['lxy:questionnaireReslut:add']">发布路线</el-button>
      </el-col> -->


      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>


    <div style="text-align: center;font-size: larger;">
      路线投票结果
    </div>


    <div class="chart-wrapper">
      <votes-chart :x-axis-data="xAxisData" :y-axis-data="yAxisData" />
    </div>


  </div>
</template>

<script>
import { listRoute } from "@/api/lxy/route";
import { selectVotes } from "@/api/lxy/questionnaireReslut";
import VotesChart from '@/views/dashboard/VotesChart'

export default {
  name: "QuestionnaireReslut",
  components: {
    VotesChart
  },
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 问卷结果表格数据
      questionnaireReslutList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: undefined,
        pageSize: undefined,
        questionnaireId: undefined,
        userId: undefined,
        isAttend: undefined,
        intendedRoute: undefined,
        isBringdepe: undefined,
        dependentNum: undefined,
      },
      // 表单参数
      form: {},
      xAxisData: [],
      yAxisData: [],

      votePeopleSum: 0,
      dependentVoteSum: 0,
      voteSum: 0,
    };
  },
  created() {
    this.getList();
    this.getVotes();
  },
  methods: {
    /** 查询问卷结果列表 */
    getList() {

      this.queryParams.projectId = this.$route.query.projectId;
      this.queryParams.questionnaireName = this.$route.query.questionnaireName;
      this.queryParams.questionnaireId = this.$route.query.questionnaireId;

      this.loading = true;
      listRoute(this.queryParams).then(response => {
        this.routeList = response.rows;
        this.xAxisData = this.routeList.map(item =>
          item.name)
        this.yAxisData = this.routeList.map(item =>
          item.votes)


        this.total = response.total;
        this.loading = false;
      });
    },


    /** 查询投票结果 */
    getVotes() {
      this.queryParams.id = this.$route.query.questionnaireId;

      selectVotes(this.queryParams).then(response => {
        this.votePeopleSum=response.votePeopleSum;
        this.dependentVoteSum = response.dependentVoteSum;
        this.voteSum = response.voteSum;
        this.loading = false;
      })
    },

  }
};
</script>



<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
